<template>
  <view class="index-content" @tap="handleTap">
    <uni-notice-bar single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
    <view class="head">参数说明：时间差 - x坐标(x坐标差) - y坐标(y坐标差)</view>
    <view :key="tapLogItem.id" v-for="tapLogItem in tapLogList">
      <span>{{tapLogItem.time}}</span>
      <span>-</span>
      <span>{{tapLogItem.x}}({{tapLogItem.x1}})</span>
      <span>-</span>
      <span>{{tapLogItem.y}}({{tapLogItem.y1}})</span>
    </view>
  </view>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { ref,reactive } from 'vue'
type TapLog = {
  id: String,
  x: Number,
  x1: Number,
  y: Number,
  y1: Number,
  time: Number,
  createTime: Date
}
const tapLogList:Array<TapLog> = reactive([])
const handleTap = (event)=>{
  let now=new Date();
  let id=_.uniqueId()
  let time= 0
  let x1=0
  let y1=0
  if(tapLogList.length>0){
    time=now-tapLogList[0].createTime
    x1= Math.abs(event.detail.x-tapLogList[0].x)
    y1= Math.abs(event.detail.y-tapLogList[0].y)
  }
  tapLogList.unshift({
    id: _.uniqueId(),
    x: event.detail.x,
    y: event.detail.y,
    x1: x1,
    y1: y1,
    time: time,
    createTime: now
  })

}

</script>

<style>
.index-content {
  height: 100vh;
  font-size: 28rpx;
}

.head{
  font-weight: 700;
}

</style>
